<template>
    <div class="box">
        <img class="title_row" src="/images/title_row.png" alt="">
        <div class="title">{{title}}</div>
        <div class="more hand" v-if="isShowMore" @click="showCameraList()">more</div>
        <img class="title_line" src="/images/title_b_line.png" alt="">
    </div>
</template>
<script setup>
  import { store } from "@/store/config.js"


  function showCameraList()
  {
    store.commit("setDialogTableStatus",true);
    store.commit("setCameraListStatus",true);
    store.commit("setAlertListStatus",false);
    store.commit("setPersonnelListStatus",false);
  }
defineProps({
    title:String,
    isShowMore: {type: Boolean,default: false},
})

</script>

<style lang="less" scoped>
    .box{
        width: 340px;
        height: 40px;
        line-height: 40px;
        .title_row{
            display: inline-block;
            height: 40px;
            width: auto;
            float: left;
        }
        .title{
            display: inline-block;
            text-align: left;
            margin-left: 10px;
            color: white;
            font-size: 16px;
        }
        .title_line{
            width: 300px;
            height: 2px;
            margin-top: 2px;
            display: block;
            margin-left: 40px;
        }
        .more{
            float: right;
            color: white;
            margin-right: 20px;
        }
    }


</style>